<template>
	<u-popup :show="visible" @close="close" :closeable="true">
		<view class="popup">
			<view class="popup-header">
				<image :src="ossUrl + `/static/16.png`"></image>
				选择你要同步的名片
			</view>
			<view class="list changeCard">
				<view class="list-item" v-for="it in list" @click="swipeDction(it)">
					<view class="list_item">
						<!-- <image :src="ossUrl + `/static/19.png`" mode="" class="list_item-bg" v-if="businessCard == it.id"></image> -->
						<view class="list_item-conent">
							<image :src="it.head" mode="" class="list_item-conent-bg"></image>
							<view class="list_item-conent-r">
								<view class="list_item-conent-r-h">
									<view class="list_item-conent-r-h-name">
										{{it.nickname}} 
										<text style="margin-left: 10rpx;font-weight: 400; font-size: 30rpx; color: #292929;">{{it.letter ? `(${it.letter})` : ''}}</text>
									</view>
									<!-- <view class="list_item-conent-r-h-edit" @click.stop="toEditData(it.id)">
										<image :src="ossUrl + `/static/bianji.png`" mode=""></image>
										编辑
									</view> -->
									<view class="list_item-conent-r-h-r" v-if="it.name">
										{{it.name || ''}}
									</view>
								</view>
								<!-- <view class="list_item-conent-r-subTitle">{{it.name}}</view> -->
								<view class="list_item-conent-r-address">公司：{{it.company || ''}}</view>
								<view class="list_item-conent-r-circle">圈子：{{it.circle || ''}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		InformationBusinessCardList,
		InformationSwitchBusinessCard,
		InformationDelBusinessCard,
		InformationSendFriendRequest
	} from '@/common/http/api.js'
	export default {
		props: {
			businessCard: {
				type: Number | String,
				default: () => ''
			},
			otherId: {
				type: Number | String,
				default: () => ''
			},
		},
		data() {
			return {
				visible: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				list: []
			}
		},
		created() {

		},
		methods: {
			sure(id) {
				uni.showLoading()
				InformationSwitchBusinessCard({
					id
				}).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title: '切换成功！',
						icon: 'none'
					})
					this.visible = false
					this.$store.dispatch('getShare')
					this.$emit('reload')
				})
			},
			swipeDction(e) {
				console.log('e', e)
				this.$emit('submit', e.id)
				this.close()
			},
			show() {
				this.list = []
				InformationBusinessCardList().then(res => {
					this.list = res.data
				})
				this.visible = true
			},
			close() {
				this.visible = false
			},
			toEditData(id) {
				this.visible = false
				uni.navigateTo({
					url: '/pagesC/index/editData?id=' + id
				})
			},
			addCard() {
				this.visible = false
				uni.navigateTo({
					url: '/pagesC/index/addMyCard'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		position: relative;

		.popup-header {
			padding: 27rpx 0;
			position: relative;

			image {
				position: absolute;
				top: 30rpx;
				left: 38rpx;
				width: 30rpx;
				height: 30rpx;
			}

			font-family: PingFang;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			text-align: center;
		}
	}

	.list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		height: 700rpx;
		overflow-y: scroll;

		.list-item {
			width: 100%;
			margin-bottom: 12rpx;

			.list_item {
				width: 100%;
				position: relative;
				height: 210rpx;
				border: 1rpx solid #CECECE;
				box-sizing: border-box;
				border-radius: 20rpx;

				.list_item-bg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					width: 100%;
					height: 100%;
				}

				.list_item-conent {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
					display: flex;
					box-sizing: border-box;
					padding: 43rpx 21rpx;

					&>image {
						border-radius: 50%;
						width: 107rpx;
						height: 106rpx;
						margin-right: 26rpx;
					}

					.list_item-conent-r {
						flex: 1;
						min-width: 0;

						.list_item-conent-r-h {
							display: flex;
							margin-bottom: 20rpx;
							align-items: center;
							justify-content: space-between;

							.list_item-conent-r-h-name {
								font-family: PingFang;
								font-weight: 400;
								font-size: 30rpx;
								color: #131313;
							}

							.list_item-conent-r-h-edit {
								display: flex;
								align-items: center;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #292929;

								image {
									width: 34rpx;
									height: 34rpx;
									margin-right: 6rpx;
								}
							}
							.list_item-conent-r-h-r {
								background: #E6E6E6;
								color: #292929;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								padding: 10rpx 15rpx;
							}

						}

						.list_item-conent-r-subTitle {
							font-family: PingFang;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 14rpx;
						}

						.list_item-conent-r-address {
							font-family: PingFang;
							font-weight: 400;
							font-size: 24rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							margin-bottom: 14rpx;
						}
						.list_item-conent-r-circle {
							font-family: PingFang;
							font-weight: 400;
							font-size: 26rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							color: #60AF71;
						}
					}
				}
			}

			.list_item-ac {
				border: 0rpx;
			}
		}

		.add {
			display: flex;
			justify-content: center;
			align-items: center;

			&>image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 28rpx;
			}

			font-family: PingFang;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
		}
	}
</style>